<html>
	<head>
		
		<meta name="layout" content="main" />
		<title>Árbol de directorios</title>
		
		<script type="text/javascript" src="/${grails.util.Metadata.current.'app.name'}/js/jquery/jquery-ui-1.8.18.custom.js"></script>
		<script type="text/javascript" src="/${grails.util.Metadata.current.'app.name'}/js/sortable/jquery-sortable.js"></script>
		<script>
			$(function  () {

				// Sortable rows
				$('.sorted_table').sortable({
				  containerSelector: 'table',
				  itemPath: '> tbody',
				  itemSelector: 'tr',
				  placeholder: '<tr class="placeholder"/>'
				})


				
				var group = $("ol.serialization").sortable({
					  group: 'serialization',
					  delay: 500,
					  onDrop: function (item, container, _super) {
					    var data = group.sortable("serialize").get();

					    var jsonString = JSON.stringify(data, null, ' ');

						$.post("/CMS/test02/index2",{sourceId: "w", extra: "33", allTreeContent:jsonString},function(response){
					        // Process response here.
					        
					    });

					    
					    $('#serialize_output2').text(jsonString);
					    _super(item, container)
					  }
					})
					
				/* *************************** */	
				//$("#First").click(function(){
				//	jQuery.get("/CMS/test01/index2", function(response){
				        // Process response here.
				//    })
				//	  alert("The paragraph was clicked.");
				//});
				
			  var oldContainer
				$("ol.default").sortable({
				  group: 'nested',

				    
				  afterMove: function (placeholder, container) {
					if(oldContainer != container){
					  if(oldContainer)
						oldContainer.el.removeClass("active")
					  container.el.addClass("active")
					  
					  oldContainer = container
					}
				  },

					  
				  onDrop: function (item, container, _super) {
					    var data = group.sortable("serialize").get();

					    var jsonString = JSON.stringify(data, null, ' ');
					    
					container.el.removeClass("active")
					alert("---"+container.el.attr("id"))
					//item es el elemento que se mueve
					var ident = item.attr("id");
//var ident = item.sortable("serialize").get()[0];
					alert(item.attr("id")+" "+item.attr("parentId"))
					$.post("/CMS/test02/index2",{sourceId: ident, parentId:item.attr("parentId"), extra:jsonString},function(response){
				        // Process response here.
				        
				    });
					_super(item)
				  }
				})

			})
		</script>
		<style>
			body.dragging, body.dragging * {
			  cursor: move !important;
			}

			.dragged {
			  position: absolute;
			  opacity: 0.5;
			  z-index: 2000;
			}

			ol.example li.placeholder {
			  position: relative;
			  /** More li styles **/
			}
			ol.example li.placeholder:before {
			  position: absolute;
			  /** Define arrowhead **/
			}
		</style>
		
		<wcm:myTag />
	</head>
	<body>

		<ol class="default vertical" id="containersillo2">
              <li data-name="Item 1" data-id="0" id="First" parentId="NONE">
                First
                <ol></ol>
              </li>
              <li data-name="Item 2" data-id="1" id="Second">
                Second
                <ol></ol>
              </li>
              <li data-name="Item 3" data-id="2" id="Third">
                Third
                <ol>
                  <li data-name="Item 4" data-id="3">First</li>
                  <li data-name="Item 5" data-id="4">Second</li>
                  <li data-name="Item 6" data-id="5">
                    Third
                    <ol>
                      <li>First</li>
                      <li>Second</li>
                    </ol>
                    <ol>
                      <li>First</li>
                      <li>Second</li>
                    </ol>
                  </li>
                </ol>
              </li>
              <li>Fourth</li>
              <li>Fifth</li>
              <li>Sixth</li>
            </ol>

<br> TABLA CON SERIALIZACION <br>
<ol class="serialization vertical">
                <li data-id="0" data-name="Item 1">
                  Item 1
                  <ol></ol>
                </li>
                <li data-id="1" data-name="Item 2">
                  Item 2
                  <ol></ol>
                </li>
                <li data-id="2" data-name="Item 3">
                  Item 3
                  <ol></ol>
                </li>
                <li data-id="3" data-name="Item 4">
                  Item 4
                  <ol>
                    <li data-id="3-0" data-name="Item 3.1">Item 3.1<ol></ol></li>
                    <li data-id="3-1" data-name="Item 3.2">Item 3.2<ol></ol></li>
                    <li data-id="3-2" data-name="Item 3.3">Item 3.3<ol></ol></li>
                    <li data-id="3-3" data-name="Item 3.4">Item 3.4<ol></ol></li>
                    <li data-id="3-4" data-name="Item 3.5">Item 3.5<ol></ol></li>
                    <li data-id="3-5" data-name="Item 3.6">Item 3.6<ol></ol></li>
                  </ol>
                </li>
                <li data-id="4" data-name="Item 5">
                  Item 5
                  <ol></ol>
                </li>
                <li data-id="5" data-name="Item 6">
                  Item 6
                  <ol></ol>
                </li>
              </ol>
              
****************************************************************************<br>
<table class="table table-striped table-bordered sorted_table">
                <thead>
                  <tr>
                    <th>A Column</th>
                    <th>B Column</th>
                  </tr>
                </thead>
                <tbody>
                  
                  <tr tr class="s">
                    <td>A Item 2</td>
                    <td>B Item 2</td>

                  </tr>
                  <tr class="">
                    <td>A Item 1</td>
                    <td>B Item 1</td>
                  </tr>
                  <tr>
                    <td>A Item 3</td>
                    <td>B Item 3</td>
                  </tr>
                  <tr>
                    <td>A Item 4</td>
                    <td>B Item 4</td>
                  </tr>
                  <tr>
                    <td>A Item 5</td>
                    <td>B Item 5</td>
                  </tr>
                  <tr>
                    <td>A Item 6</td>
                    <td>B Item 6</td>
                  </tr>
                </tbody>
              </table>
              
	</body>
</html>